<template>
	<view>
		
		<!-- 状态栏 -->
		<view class="status" :style="{ position: headerPosition }"></view>
		<!-- 顶部导航栏 -->
		<view class="header" :style="{ position: headerPosition }">
			<!-- 定位城市 -->
			<view class="addr">
				<view class="icon location"></view>
				xuejss
			</view>
			<!-- 搜索框  -->
			<view class="input-box">
				<input
					placeholder="请输入查询关键字"
					placeholder-style="color:#c0c0c0;"
					@tap="kaifa()"
				/>
				<!-- <view class="lg text-gray icon-search"></view> -->
			</view>
			<!-- 右侧图标按钮 -->
			<view class="iconn-btn">
				<view class="lg text-gray icon-size icon-notification" @click="kaifa"></view>
				<view class="lg text-gray icon-size icon-roundadd" @click="kaifa"></view>
			</view>
		</view>
		<!-- 占位 --> 

		<view class="place"></view>
				
		<!-- 占位 -->			
				
		
		<scroll-view scroll-y class="page">
			
			<view class="response" style="margin-top: 10upx;">
				
			</view>
	<!-- 		<view class="nav-list">
				<navigator hover-class='none' :url="'/pages/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'icon-' + item.icon"></text>
				</navigator>
			</view> -->
			
			<view class="grid col-3 padding-sm">
			
		<view class="padding-sm" v-for="(item,index) in elements" :key="index">
		<navigator hover-class='none' :url="'/pages/menu/' + item.name">
	<view class="padding radius text-center light" :class="'bg-' + item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" >
		<view class="text-lg">{{item.title}}</view>
		<view class="margin-top-sm text-Abc">{{item.des}}</view>
		</view>
		</navigator>	
		</view> 

	    </view>								
		<view class="cu-tabbar-height"></view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerPosition: 'fixed',
				elements: [{
						title: '天气查询',
						name: 'jk/weather',
						des: '工具',						
						color: 'purple',
						icon: 'vipcard'
					},
					{
						title: '归属地 ',
						name: 'jk/mobile',
						des: '工具',							
						color: 'mauve',
						icon: 'formfill'
					},
					{
						title: 'ip查询',
						des: '工具',							
						name: 'jk/ip',
						color: 'pink',
						icon: 'list'
					},
					{
						title: 'QQ信息',
						des: '工具',							
						name: 'jk/qqinfo',
						color: 'pink',
						icon: 'list'
					},
					{
						title: '扫码',
						des: '工具',							
						name: 'jk/scan',
						color: 'pink',
						icon: 'list'
					}
						
				],
			};
		},
	methods:{
			
			getuserlist: function(){	
			uni.request({
			url: 'https://api.xuejss.com/xue/?s=user.user_all&uid=62',
			method: 'GET',
				success: res => {
					console.log(res);
					this.userList= res.data.data[0];
					console.log(res);
			        uni.hideLoading(this.userList);
				},
				complete: res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			});					
			},					
		kaifa(){
		uni.showToast({"title":"开发中...", icon:"none"});
	    },				
		}		
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
<style lang="scss">
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: 100%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
        border-bottom: 1px solid #eccff1;		
		top: 0;
		z-index: 10;
		background-color: #fff;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */ 
	
		.addr {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: #98a7b0;
			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box {
			width: 100%;
			height: 60upx;
			background-color: #f5f5f5;
			border-radius: 30upx;
			position: relative;
			display: flex;
			align-items: center;
			text-align: center;
			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.iconn-btn {
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			line-height: 60upx;
		}
		
		.icon-size {
		    font-size: 19px;
            margin-left: 10px;	
			
		}
	}
	.place {
		background-color: #ffffff;
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
</style>
